<template>
  <div class="advice-container">
    <div class="advice-header">
      <h2>意见反馈</h2>
    </div>
    <div class="advice-body">
      <el-form ref="formRef" :model="form" style="margin:20px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名:">
              <el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱:">
              <el-input v-model="form.email" placeholder="请输入您的邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址:">
              <el-input v-model="form.address" placeholder="请输入您的地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话:">
              <el-input v-model="form.phone" placeholder="请输入您的联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="意见:">
              <el-input v-model="form.content" type="textarea" placeholder="请输入您的意见"></el-input>
            </el-form-item>
          </el-col>
          <div class="advice-btn">
            <el-button type="primary" icon="Promotion" @click="submitForm">提交</el-button>
            <el-button type="primary" icon="Refresh" @click="resetForm" plain>重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";

const form = ref({
  name: '',
  email: '',
  phone: '',
  content: ''
})
const formRef = ref(null)

const submitForm = () => {
  if (!form.value.name ||!form.value.email ||!form.value.phone ||!form.value.content) {
    ElMessage.error('请填写所有必填项')
    return
  }
  // TODO: 发送请求
  console.log(form.value)
  ElMessage.success('提交成功')
  resetForm()
}

const resetForm = () => {
  form.value = {
    name: '',
    email: '',
    phone: '',
    content: ''
  }
}

</script>

<style scoped lang="scss">
.advice-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

  .advice-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #282727;
    padding: 0 20px;
    background-color: #c6f3ed;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
  }

  .advice-body {
    padding: 0 20px 20px 20px;

    .advice-btn {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      width: 100%;
      padding: 0 10px;
    }
  }
}
</style>